import React,{Component} from 'react'
import {Form, Icon, Input, Button, Checkbox} from 'antd';
import 'antd/dist/antd.css'
import {LoginBox} from '../style'
import {connect} from 'react-redux'
import {handlerUsernameChange,handlerPasswordChange,getLoginAction} from '../../../store/actionCreator'
class Login extends Component{
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      }
     componentDidUpdate(){
         if(this.props.success){
             alert('登录成功');
         }
     }
    render(){
            const { getFieldDecorator } = this.props.form;
    return (
        <LoginBox>
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username"  onChange={this.props.handlerUsername}/>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" onChange={this.props.handlerPassword}/>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>Remember me</Checkbox>
          )}
          <a className="login-form-forgot" href="">Forgot password</a>
          <Button type="primary" htmlType="button" className="login-form-button" onClick={()=>{this.props.handlerLogin(this.props.username,this.props.password)}}>
            Log in
          </Button>
          Or <a href="">register now!</a>
        </Form.Item>
      </Form>
        </LoginBox>
    )
          }
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login);
const mapStateToProps = (state)=>{
    return{
        username:state.get('login').get('username'),
        password:state.get('login').get('password'),
        success:state.get('login').get('success'),
    }
}
const mapDispatchToProps = (dispatch)=>{
    return{
        handlerUsername(e){
            //console.log(e.target.value);
            let action = handlerUsernameChange(e.target.value);
            dispatch(action);
        },
        handlerPassword(e){
            //console.log(e.target.value);
            let action = handlerPasswordChange(e.target.value);
            dispatch(action);
        },
        handlerLogin(username,password){
            //console.log(username,password);
            let action = getLoginAction(username,password);
            dispatch(action);
           
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(WrappedNormalLoginForm);
